<template>
  <div class="index">
      <div class="top">
        <span class="iconfont" @click="close">&#xe607;</span>
      </div>
      <div class="main">
        <h3>手机号登录</h3>
        <nut-textinput v-model="phone" label="账号：" :clearBtn="true" :disabled="false" />
        <nut-textinput v-model="psd" label="密码：" type="password" />
        <nut-button block shape="circle" @click="userlogin">登录</nut-button>

        <span class="tip">手机号测试账号</span>
      </div>
  </div>
</template>
<script>
import { url, login, userdetail, status } from "../api/api";
export default {
  data() {
    return {
      phone: "17671236081",
      psd: "qq20000216"
    };
  },
  methods: {
    // 关闭登录
    close() {},

    //  登录
    userlogin() {
      let that = this;
      this.$axios
        .get(`${url}${login}`, {
          params: {
            phone: that.phone,
            password: that.psd
          }
        })
        .then(response => {
          if (response.status >= 200 && response.status < 300) {
            this.$notify.success("登录成功");
            this.id = response.data.account.id;
            document.cookie = "token=" + response.data.token;
            this.$store.commit("settoken", response.data.token);
            this.$store.commit("setid", response.data.account.id);
            this.$store.commit("setuser", this.phone);
            this.$store.commit("setpsd", this.psd);
            this.$router.push({ path: "/my" });
          } else {
            this.$notify.danger(response.message);
          }
        });
    }
  }
};
</script>
<style scoped>
.index {
  color: #666;
}
.top {
  padding: 10px;
}
h3 {
  font-weight: bold;
  margin-bottom: 20px;
}
.main {
  padding: 10px;
  margin-top: 20px;
  text-align: center;
}
.nut-textinput {
  margin-top: 10px;
}
.nut-button {
  margin-top: 20px;
  background: linear-gradient(315deg, #fc386b 0%, #fc386b 100%);
}
.tip {
  color: #ccc;
  font-size: 14px;
}
</style>